<template>
    <h2>添加页面</h2>
    <table class="table table-bordered">
        <tbody>
            <tr>
                <td>图片</td>
                <td>
                    <img :src="form.tuPian" style="display: '';max-width: 100px;max-height: 100px">
                    <input type="file" style="display: '';" id="file" @change="Tupian">
                </td>
            </tr>
            <tr>
                <td>名称</td>
                <td>
                    <input type="text" v-model="form.name">
                </td>
            </tr>
            <tr>
                <td>用户名</td>
                <td>
                    <input type="text" v-model="form.userName">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type="password" v-model="form.pwd">
                </td>
            </tr>
             <tr>
                <td>会员等级</td>
                <td>
                    <select v-model="form.huiYuanDj">
                        <option>黄金会员</option>
                        <option>白银会员</option>
                        <option>钻石会员</option>
                    </select>
                </td>
            </tr>
             <tr>
                <td>生日</td>
                <td>
                    <input type="date" v-model="form.shengre">
                </td>
            </tr>
             <tr>
                <td>电话</td>
                <td>
                    <input type="text" v-model="form.phone">
                </td>
            </tr>
             <tr>
                <td>金额</td>
                <td>
                    <input type="text" v-model="form.money">
                </td>
            </tr>
             <tr>
                <td>时间</td>
                <td>
                    <input type="date" v-model="form.date">
                </td>
            </tr>
             <tr>
                <td>费用</td>
                <td>
                    <input type="text" v-model="form.feiYong">
                </td>
            </tr>
             <tr>
                <td>累计</td>
                <td>
                    <input type="text" v-model="form.leiji">
                </td>
            </tr>
             <tr>
                <td>备注</td>
                <td>
                    <input type="text" v-model="form.beizhu">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button class="btn btn-primary" @click="Add">添加</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">
//引入组件
import { ref, reactive, onMounted } from "vue"
//bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css"
//访问后端
import axios from "axios"
//路由(1)
import { useRouter } from "vue-router";

const router = useRouter();

const form = reactive({
    id: 0,
    tuPian:"",
  name: "",
  userName: "",
  pwd: "",
  huiYuanDj: "",
  shengre: "",
  phone: "",
  money: "",
  date: "",
  feiYong: "",
  leiji: "",
  beizhu: ""
})
const Add = () => {
    if (!form.name) {
        alert("名称不能为空！")
        return;
    }
    if (!form.userName) {
        alert("用户名不能为空！")
        return;
    }
    if (!form.pwd) {
        alert("密码不能为空！")
        return;
    }
    axios.post("http://localhost:5145/api/Huiyuan/Add", form).then(res => {
        if (res.data > 0) {
            alert("添加成功！！");
            router.push("/huiyuanShow")
        }
        else {
            alert("添加失败！！！");
        }
    })
}
//图片上传
const Tupian = (e: any) => {
    //定义菜单
    var formData = new FormData();
    //上传的文件信息
    var file = e.target.files[0];

    formData.append("file", file)

    axios.post("http://localhost:5145/api/Huiyuan/Pic", formData).then(res => {
        form.tuPian = res.data;
    }).catch(err => {
        console.log(err)
    })
    
}
</script>